import React, { useRef, useEffect } from "react";
import Vditor from "vditor";
import "vditor/dist/index.css";
const VditorPreview: React.FC<{ markdownContent: any }> = ({ markdownContent }) => {
	const vditorRef = useRef(null);

	useEffect(() => {
		if (vditorRef.current) {
			// const vditor = new Vditor(vditorRef.current, {
			// 	toolbarConfig: {
			// 		// preview: { delay: 1000, maxWidth: "800px" }
			// 	}
			// });
			const markdownText = `# 教程
			这是一篇讲解如何正确使用 **Markdown** 的排版示例
			# 语法指导
			## 普通内容
			这段内容展示了在内容里面一些排版格式
			## 提及用户
			@Vanessa 通过 @User 可以在内容中提及用户，被提及的用户将会收到系统通知。
			## 表情符号 Emoji
			支持大部分标准的表情符号，可使用输入法直接输入，也可手动输入字符格式。
			### 一些表情例子
			:smile: :laughing:`;
			// const html = await Vditor.md2html(markdownText);
			// 更新预览区域的内容
			// vditorRef.current = html;
			// vditorRef.current.innerHTML = Vditor.md2html(markdownText);
			// console.log(());

			// Vditor.preview(vditorRef?.current, markdownText);
			// Vditor.preview()
			// vditor.preview.show(vditor, markdownContent);
		}
	}, [markdownContent]);

	return <div ref={vditorRef} />;
};

export default VditorPreview;
